<template>
  <div class="header">
    <div class="content">
      <img class="profile_img" :src="userImg" alt />
      <h2 class="profile_name">{{userName}}</h2>
      <img class="profile_vip" src="~assets/images/imgs/vip.png" alt />
      <grid class="grid">
        <template>
          <grid-item class="item" v-for="item in datas" :key="item.id">
            <template #img>
              <img :src="item.img" alt />
            </template>
            <template #text>
              <p>{{item.text}}</p>
            </template>
          </grid-item>
        </template>
      </grid>
      
    </div>
  </div>
</template>

<script>
import Grid from "components/public/grid/Grid";
import GridItem from "components/public/grid/GridItem";
export default {
  name: "Header",
  computed: {
    userName() {
      if (this.$store.state.user) {
        return this.$store.state.user.user_name;
      }
    },
    userImg() {
      if (this.$store.state.user) {
        return this.$store.state.user.img_url;
      }
    },
    
  },
  data() {
    return {
      datas: {
        item1: {
          id: 1,
          img: require("assets/images/imgs/item_1.png"),
          text: "我的主页"
        },
        item2: {
          id: 2,
          img: require("assets/images/imgs/item_2.png"),
          text: "消息"
        },
        item3: {
          id: 3,
          img: require("assets/images/imgs/item_3.png"),
          text: "收藏"
        },
        item4: {
          id: 4,
          img: require("assets/images/imgs/item_4.png"),
          text: "关注"
        }
      }
    };
  },
  components: {
    Grid,
    GridItem
  },
  created() {
    
    
  }
};
</script>

<style lang="less" scoped>
.header {
  // background-color: #fff;
  .content {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color: coral;
    border-radius: 20px;
    padding-top: 50px;
    margin-top: 70px;
    position: relative;
    border: 1px salmon solid;

    .profile_img {
      width: 80px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 0;
      border-radius: 50%;
      border: 4px solid #fff;
    }
    .profile_name {
      margin-bottom: 10px;
    }
    .profile_vip {
      width: 100%;
    }
    .grid {
      .item {
        flex: 1;
      }
      border-radius: 0px 0px 20px 20px;
    }
  }
}
</style>